<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    html,body{
        width: 100%;
        height: 100%;
    }
    .outer{
        width: 50%;
        height: 50%;
        background-color: #8d5757;
    }
</style>
<body>
<div class="outer">

</div>

</body>
<script>
    let totalPage=16
    let currentPage=5
    let container=document.querySelector(".outer")
    pagination(totalPage,currentPage,container,function (pageNumber){console.log(pageNumber)})
    //只生成一个分页框样式，具体的点击逻辑由用户给出
    function pagination(totalPage,currentPage,container,onclick) {
        let pageButtonClass="pageButtonClass"
        let html=`<div><button style="background-color: cadetblue" class='${pageButtonClass}'>${currentPage}</button></div>`
        //自当前页开始，向前显示after个页码(如果有)，显示省略按钮，显示最后一页按钮
        let after=2
        if(currentPage+after+1<totalPage)
        {
            for(let i=currentPage+1;i<=currentPage+after;i++)
            {
                html=html+`<div><button class='${pageButtonClass}'>${i}</button></div>`
            }
            html=html+`<div><button>...</button></div>`
            html=html+`<div><button class='${pageButtonClass}'>${totalPage}</button></div>`
        }
        else
        {
            for(let i=currentPage+1;i<=totalPage;i++)
            {
                html=html+`<div><button class='${pageButtonClass}'>${i}</button></div>`
            }
        }
        //自当前页开始，向后显示before个页码(如果有)，显示省略按钮，显示最后一页按钮
        let before=2
        if(currentPage-before-1>1)
        {
            for(let i=currentPage-1;i>=currentPage-before;i--)
            {
                html=`<div><button class='${pageButtonClass}'>${i}</button></div>`+html
            }
            html=`<div><button>...</button></div>`+html
            html=`<div><button class='${pageButtonClass}'>1</button></div>`+html
        }
        else
        {
            for(let i=currentPage-1;i>=1;i--) {
                html = `<div><button class='${pageButtonClass}'>${i}</button></div>`+html
            }
        }
        html=`<div style="display: flex" class="myPagination">`+`<div><button class="upButton">上一页</button></div>`+html+`<div><button class="nextButton">下一页</button></div>`+"</div>"
        container.innerHTML=""
        container.innerHTML=html
        let myPagination=document.querySelectorAll(".myPagination ."+pageButtonClass)
        for(let i=0;i<myPagination.length;i++)
        {
            let pageNumber=myPagination[i].innerHTML
            myPagination[i].addEventListener("click", function (e) {
                onclick(pageNumber)//具体点击逻辑
                pagination(parseInt(totalPage), parseInt(pageNumber), container, onclick)//更新分页框
            })
        }
        let upButton=document.querySelector(".upButton")
        let nextButton=document.querySelector(".nextButton")
        upButton.addEventListener("click",function (e) {
            if(currentPage>1) {
                onclick(currentPage-1)//具体点击逻辑
                pagination(parseInt(totalPage), currentPage-1, container, onclick)//更新分页框
            }
        })
        nextButton.addEventListener("click",function (e) {
            if(currentPage<totalPage) {
                onclick(currentPage+1)//具体点击逻辑
                pagination(parseInt(totalPage), currentPage+1, container, onclick)//更新分页框
            }
        })

    }
</script>
</html>